.G-Graphic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    overflow: hidden;
    z-index: 905;
    backdrop-filter: blur(12px);
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.G-GraphicBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #e4e7eb;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    -ms-touch-action: none;
    touch-action: none;
}

.G-GraphicTop {
    height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e7eb;
}

.G-GraphicRefresh {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.G-GraphicClose {
    width: 12px;
    height: 12px;
    margin-left: 20px;
    cursor: pointer;
}

.G-GraphicBtit {
    font-size: 16px;
}

.G-GraphicImg {
    width: 280px;
    height: 200px;
    margin: 10px auto;
    position: relative;
}

.G-GraphicTu {
    width: 100%;
    height: 100%;
}

    .G-GraphicKuai {
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: 0;
        position: absolute;
        z-index: 10;
    }

    .G-GraphiKuai2 {
        top: 10px;
        left: 100px;
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: white;
    }

.G-GraphicSlider {
    width: 280px;
    height: 30px;
    margin: 14px auto;
    background-color: #DDDDDD;
    border-radius: 10px;
    position: relative;
}


.G-GraphicBtn {
    z-index: 20;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: -10px;
    background: white url(data:image/png;base64,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) no-repeat;
    background-size: 100%;
    border-radius: 50%;
    border: 0;
}